<template>
  <div class="cart">
    <ppd></ppd>
    <div
      class="cart_top"
      v-for="(item, index) in cartList"
      :key="item.product_id"
    >
      <div>
        <div class="cart_l">
          <van-checkbox
            @click="onClick(item.product_id, index)"
            v-model="checkedAll[index]"
            class="cart_chechbox"
            :disabled="disCheckbox"
          ></van-checkbox>
        </div>

        <van-swipe-cell class="cart_r">
          <van-card
            :num="item.number"
            :price="Number(item.retail_price).toFixed(2)"
            :title="item.goods_name"
            class="goods-card"
            :thumb="item.list_pic_url"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delFn(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <div>
        <van-stepper
          v-show="show"
          v-model="item.number"
          integer
          @change="
            onChange(item.goods_id, item.id, item.number, item.product_id)
          "
          style="text-align: right; margin-right: 10px"
        />
      </div>
    </div>

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100 || 0"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" :disabled="disCheckbox" @click="onChecked"
        >全选</van-checkbox
      >
      <template #tip>
        你有{{ cartTotal.goodsCount }}可以进行编辑,
        <van-button type="primary" v-show="!show" size="mini" @click="onshow"
          >点击编辑</van-button
        >
        <van-button type="danger" v-show="show" size="mini" @click="onshow"
          >完成编辑</van-button
        >
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import ppd from "../components/ppd.vue";
import { GetcartList, GetChecked, GetUpdate, GetDelete } from "../request/api";
export default {
  components: {
    ppd,
  },
  data() {
    return {
      //   checked: false,
      show: false,
      checkedAll: [],
      disCheckbox: false,
      cartList: [],
      cartTotal: {},
    };
  },
  async created() {
    await GetcartList().then((res) => {
      if (!res.errno === 0) return;
      console.log(res);
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      console.log(this.cartList);
      this.checkedAll = res.data.cartList.map((item) => {
        return item.checked == 1 ? true : false;
      });
    });
  },
  methods: {
    onSubmit() {},
    onshow() {
      this.show = !this.show;
      this.disCheckbox = !this.disCheckbox;
    },
    delFn(id) {
      GetDelete({productIds: String(id)}).then((res) => {
        console.log(res);
        this.cartList = res.data.cartList;
        this.cartTotal = res.data.cartTotal;
      });
    },
    //复选框点击
    onClick(id, index) {
      let newid = String(id);
      GetChecked({
        isChecked: this.checkedAll[index] ? 1 : 0,
        productIds: newid,
      }).then((res) => {
        console.log(res);
        this.cartTotal = res.data.cartTotal;
        this.cartList = res.data.cartList;
      });
    },
    //编辑
    onChange(goodsId, id, num, produtld) {
      console.log(goodsId, id, num, produtld);
      GetUpdate({
        goodsId: goodsId,
        id: id,
        number: num,
        productId: produtld,
      }).then((res) => {
        console.log(res);
        this.cartList = res.data.cartList;
        this.cartTotal = res.data.cartTotal;
      });
    },
    //复选框全选请求
    onChecked() {
      let newid = [];
      if(this.cartList.length==0)return;
      newid = this.cartList.map((item) => {
        return item.product_id;
      });
      GetChecked({
        isChecked: this.checked ? 1 : 0,
        productIds: newid,
      }).then((res) => {
        console.log(res);
        this.cartTotal = res.data.cartTotal;
        this.cartList = res.data.cartList;
      });
    },
  },
  computed: {
    checked: {
      get() {
        return !this.checkedAll.includes(false)&&this.checkedAll.length
      },
      set(val) {
        return (this.checkedAll = this.checkedAll.map(() => val));
      },
    },
  },
};
</script>
 
<style lang = "less" scoped>
.cart {
  .cart_top {
    position: relative;
    border-bottom: 1px solid rgb(228, 228, 228);
    .cart_l {
      height: 100%;
      background-color: #fff;
      position: absolute;
      padding: 0 5px;
      left: 0;
      top: 0;
      z-index: 1000;
      .cart_chechbox {
        height: 100%;
        line-height: 100%;
      }
    }
  }
}
.van-submit-bar {
  /* margin-bottom: 75px; */
  transform: translateY(-50px);
}
.goods-card {
  margin-left: 20px;
  background-color: rgb(253, 253, 253);
}

.delete-button {
  height: 100%;
}
</style>